<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/pages/common/component.jsp"%>
<%@ page import="com.venus.common.utils.DateUtil" %>
<%@ page import="java.util.Date" %>
<html>
<head>
<title>报表</title>

<script type="text/javascript">

// 报表参数
var properties ;
eval("properties="+'<%=objLoginUser.getProperties()%>');

var piechartOptions = 
{
	chart: {
		renderTo: '',
		plotBackgroundColor: null,
		plotBorderWidth: null,
		plotShadow: false
	},
	title: {
		text: ''
	},
	subtitle: {
		text: ''
	},
	tooltip: {
		formatter: function() {
			return '<b>'+ this.point.name +'</b>'+ this.y +'元,'+Highcharts.numberFormat(this.percentage, 1)+'%';
		}
	},
	plotOptions: {
		pie: {
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: true,
				color: '#000000',
				connectorColor: '#000000',
				formatter: function() {
					return '<b>'+ this.point.name +'</b>'+ this.y +'元,'+Highcharts.numberFormat(this.percentage, 1)+'%';
				}
			},
			point: {
             	events : {   
                	click : function(){//绑定饼图每个子节点的click事件
						getSubPie(this.feeTypeId, this.chartType, this.name);
                   	}
            	}
          	}   
		}
	},
    series: [{
		type: 'pie',
		name: 'Browser share',
		data: [] 
		}]
};


var linechartOptions = 
{
	chart: {
		renderTo: '',
		defaultSeriesType: 'line',
		marginRight: 130,
		marginBottom: 65
	},
	title: {
		text: '',
		x: -20 //center
	},
	subtitle: {
		text: '',
		x: -20
	},
	xAxis: {
		categories: [],
			labels: {
			rotation: -45,
			align: 'right',
			style: {
				 font: 'normal 13px Verdana, sans-serif'
			}
		}

	},
	yAxis: {
		title: {
			text: '元'
		},
		plotLines: [{ // 警戒线
			value: 0,
			width: 2,
			color: 'green',
			dashStyle: 'longdashdot'
		},
		{
			value: 0,
			width: 2,
			color: 'yellow',
			dashStyle: 'longdashdot'
		},
		{ 
			value: 0,
			width: 2,
			color: 'red',
			dashStyle: 'longdashdot'
		}],
		min:0,
		max:500,
		tickInterval:50
	},
	tooltip: {
		formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
				this.x +'消费'+ this.y +'元';
		}
	},
	legend: {
		layout: 'vertical',
		align: 'right',
		verticalAlign: 'top',
		x: -10,
		y: 100,
		borderWidth: 0
	},
	plotOptions: {
		line: {
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: true,
				color: '#000000',
				connectorColor: '#000000',
				formatter: function() {
					return ;
				}
			},
			point: {
            	events : {   
                	click : function(){//绑定饼图每个子节点的click事件   
                   		getOneDayPie(this.category);
               		}
            	}
       		}   
		}
	},
	series: []
};

// 多线图+柱形图
var combochartOptions = {
	chart: {
		renderTo: ''
	},
	title: {
		text: '<fmt:formatDate value="<%=new Date() %>" pattern="yyyy" type="date"/>年支出结余'
	},
	xAxis: {
		categories: []
	},
	yAxis: {
		title: {
			text: '元'
		},
		plotLines: [{ // 警戒线
			value: 0,
			width: 2,
			color: 'green',
			dashStyle: 'longdashdot'
		},
		{
			value: 0,
			width: 2,
			color: 'yellow',
			dashStyle: 'longdashdot'
		},
		{ 
			value: 0,
			width: 2,
			color: 'red',
			dashStyle: 'longdashdot'
		}],
		min:0,
		max:5000,
		tickInterval:500
	},
	tooltip: {
		formatter: function() {
			var s;
			if (this.point.name) { // the pie chart
				s = ''+
					'<b>'+ this.point.name +'</b>' +''+ this.y +'元,'+Highcharts.numberFormat(this.percentage, 1)+'%';
			} else {
				s = ''+
					this.x + this.series.name + ':'+ this.y;
			}
			return s;
		}
	},
	labels: {
		items: [{
			html: '结余支出比',
			style: {
				left: '0px',
				top: '-10px',
				color: 'orange'
			}
		}]
	},
	series: [],
	plotOptions: {
		spline: {
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: true,
				color: '#000000',
				connectorColor: '#000000',
				formatter: function() {
					return ;
				}
			},
			point: {
            	events : {   
                	click : function(){// 绑定每个子节点的click事件
                		if(this.series.name == '支出'){ // 支出节点弹出月消费记录
                			getOneMonthChart(this.category);
                		}else if(this.series.name == '收入'){ // 收入节点弹出收入分布图
                			getRevenuePieChart(this.category);
                		}else if(this.series.name == '结余'){ // 结余节点弹出收入支出分布图
                			getInPkOutPieChart(this.category);
                		}
               		}
            	}
       		}   
		},
		column: {
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: true,
				color: '#000000',
				connectorColor: '#000000',
				formatter: function() {
					return ;
				}
			},
			point: {
            	events : {   
                	click : function(){// 绑定每个子节点的click事件
                		if(this.series.name == '支出'){ // 支出节点弹出月消费记录
                			getOneMonthChart(this.category);
                		}else if(this.series.name == '收入'){ // 收入节点弹出收入分布图
                			getRevenuePieChart(this.category);
                		}else if(this.series.name == '结余'){ // 结余节点弹出收入支出分布图
                			getInPkOutPieChart(this.category);
                		}
               		}
            	}
       		}   
		}
	}
};

<%
	Date[] dMonthIntervalDay = DateUtil.getMonthIntervalDay(DateUtil.Date2String(new Date(), "yyyy-MM-dd"), "yyyy-MM-dd");
	Date[] dMonthIntervalYear = DateUtil.getCurrentYearIntervalDate(DateUtil.Date2String(new Date(), "yyyy"), "yyyy");
%>
	
function getMonthPie(){
	// 获取月消费Pie
	$.ajax({   
	    type: "POST",
	    url: "chartAction.do",
	    data: "method=getPieChart&startDate=<%=dMonthIntervalDay[0].toString()%>&endDate=<%=dMonthIntervalDay[1].toString()%>&feeType=0&chartType=<%=Constants.CHART_TYPE_MONTH%>",
	    dataType:"json",
	    async: false,
	    cache: false,
	    success: function(json){
			piechartOptions.title.text = json.title;
			piechartOptions.subtitle.text = json.subtitle;
			piechartOptions.series[0].data = json.data;
			piechartOptions.chart.renderTo='month_pie_container';
			new Highcharts.Chart(piechartOptions);
	    },
	    error: function(msg){
	       	alert("查询数据出错!请稍后再试!");
	    }
   	});
}

function getYearPie(){
	// 获取年消费Pie
  	$.ajax({   
	    type: "POST",
	    url: "chartAction.do",
	    data: "method=getPieChart&startDate=<%=dMonthIntervalYear[0].toString()%>&endDate=<%=dMonthIntervalYear[1].toString()%>&feeType=0&chartType=<%=Constants.CHART_TYPE_YEAR%>",
	    dataType:"json",
	    async: false,
	    cache: false,
	    success: function(json){
			piechartOptions.title.text = json.title;
			piechartOptions.subtitle.text = json.subtitle;
			piechartOptions.series[0].data = json.data;
			piechartOptions.chart.renderTo='year_pie_container';
			new Highcharts.Chart(piechartOptions);
	    },
	    error: function(msg){
	       	alert("查询数据出错!请稍后再试!");
	    }
   	});
}

function getMonthLine(){
	// 获取月消费Line
	$.ajax({
	    type: "POST",
	    url: "chartAction.do",
	    data: "method=getLineChart&startDate=<%=dMonthIntervalDay[0].toString()%>&endDate=<%=dMonthIntervalDay[1].toString()%>&feeType=0&chartType=<%=Constants.CHART_TYPE_MONTH%>",
	    dataType:"json",
	    async: false,
	    cache: false,
	    success: function(json){
	    	linechartOptions.chart.renderTo='month_line_container';
			linechartOptions.title.text = json.title;
	    	linechartOptions.series = json.series;
			linechartOptions.xAxis.categories = json.categories;
			linechartOptions.yAxis.min = properties.dayLineChartMin;
			linechartOptions.yAxis.max = properties.dayLineChartMax;
			linechartOptions.yAxis.tickInterval = properties.dayLineChartInterval;
			linechartOptions.yAxis.startOnTick = true
			// 警戒提示线
			linechartOptions.yAxis.plotLines[0].value = properties.dayLineChartPlotLine1;
			linechartOptions.yAxis.plotLines[1].value = properties.dayLineChartPlotLine2;
			linechartOptions.yAxis.plotLines[2].value = properties.dayLineChartPlotLine3;
			new Highcharts.Chart(linechartOptions);
	    },
	    error: function(msg){
	       	alert("查询数据出错!请稍后再试!");
	    }
   	});
}

function getYearLine(){
	// 获取年消费Line
	$.ajax({   
	    type: "POST",
	    url: "chartAction.do",
	    data: "method=getLineChart&chartType=<%=Constants.CHART_TYPE_YEAR%>",
	    dataType:"json",
	    async: false,
	    cache: false,
	    success: function(json){
	    	linechartOptions.chart.renderTo='year_line_container';
			linechartOptions.title.text = json.title;
	    	linechartOptions.series[0].name = json.name;
	    	linechartOptions.series[0].data = json.data;
			linechartOptions.xAxis.categories = json.categories;
			linechartOptions.yAxis.max=6000;
			linechartOptions.yAxis.tickInterval=600;
			new Highcharts.Chart(linechartOptions);
	    },
	    error: function(msg){
	       	alert("查询数据出错!请稍后再试!");
	    }
   	});
}

function getYearCombo(){
	// 获取年消费Combo
	$.ajax({   
	    type: "POST",
	    url: "chartAction.do",
	    data: "method=getComboChart&startDate=<%=dMonthIntervalYear[0].toString()%>&endDate=<%=dMonthIntervalYear[1].toString()%>",
	    dataType:"json",
	    async: false,
	    cache: false,
	    success: function(json){
	    	combochartOptions.chart.renderTo='year_combo_container';
	    	combochartOptions.yAxis.min=properties.monthComboChartMin;
			combochartOptions.yAxis.max=properties.monthComboChartMax;
			combochartOptions.yAxis.tickInterval=properties.monthComboChartInterval;
			// 警戒提示线
			combochartOptions.yAxis.plotLines[0].value = properties.monthComboChartPlotLine1;
			combochartOptions.yAxis.plotLines[1].value = properties.monthComboChartPlotLine2;
			combochartOptions.yAxis.plotLines[2].value = properties.monthComboChartPlotLine3;
			combochartOptions.xAxis.categories = json.categories;
	    	combochartOptions.series = json.series;
			new Highcharts.Chart(combochartOptions);
	    },
	    error: function(msg){
	       	alert("查询数据出错!请稍后再试!");
	    }
   	});
}

function getSubPie(feeTypeId, chartType, titleName){
	var startDate = '';
	var endDate = '';
	if(chartType == '<%=Constants.CHART_TYPE_MONTH%>'){ // 时间范围:当月
		startDate = '<%=dMonthIntervalDay[0].toString()%>';
		endDate = '<%=dMonthIntervalDay[1].toString()%>';
	}else if(chartType == '<%=Constants.CHART_TYPE_YEAR%>'){ // 时间范围:最近一年
		startDate = '<%=dMonthIntervalYear[0].toString()%>';
		endDate = '<%=dMonthIntervalYear[1].toString()%>';
	}else{
		alert('没有找到子饼图的报表类型:'+chartType+',提示来源:getSubPie');
	}
	$('#sub_pie_container').html('');
	$("#sub_pie_container").dialog({modal:true, autoOpen:false});
	$("#sub_pie_container").dialog('option', 'title', titleName+' 细类支出');
	$("#sub_pie_container").dialog('option', 'width', 470);
	$("#sub_pie_container").dialog('option', 'height', 300);
	$("#sub_pie_container").dialog('open');
	$('#sub_pie_container').load('/venus/pages/chart/getSubPie.jsp?chartType='+chartType+'&feeTypeId='+feeTypeId+'&feeType=0&startDate='+startDate+'&endDate='+endDate);
}

function getOneDayPie(dayDate){
	$('#pie_container').html('');
	$("#pie_container").dialog({modal:true, autoOpen:false});
	$("#pie_container").dialog('option', 'title', dayDate+' 日支出');
	$("#pie_container").dialog('option', 'width', 470);
	$("#pie_container").dialog('option', 'height', 300);
	$("#pie_container").dialog('open');
	$('#pie_container').load('/venus/pages/chart/getPieChart.jsp?startDate='+dayDate+'&endDate='+dayDate+'&feeType=0');
}

function getOneMonthChart(monthDate){
	var dMonthIntervalDay = getMonthIntervalDay(monthDate);
	$('#onemonth_chart_container').html('');
	$("#onemonth_chart_container").dialog({modal:true, autoOpen:false});
	$("#onemonth_chart_container").dialog('option', 'title', monthDate+' 月支出');
	$("#onemonth_chart_container").dialog('option', 'width', 1050);
	$("#onemonth_chart_container").dialog('option', 'height', 400);
	$("#onemonth_chart_container").dialog('open');
	$('#onemonth_chart_container').load('/venus/pages/chart/getOneMonthChart.jsp?startDate='+dMonthIntervalDay[0]+'&endDate='+dMonthIntervalDay[1]+"&feeType=0");
}

function getRevenuePieChart(monthDate){
	var dMonthIntervalDay = getMonthIntervalDay(monthDate);
	$('#pie_container').html('');
	$("#pie_container").dialog({modal:true, autoOpen:false});
	$("#pie_container").dialog('option', 'title', monthDate+' 月收入');
	$("#pie_container").dialog('option', 'width', 470);
	$("#pie_container").dialog('option', 'height', 300);
	$("#pie_container").dialog('open');
	$('#pie_container').load('/venus/pages/chart/getPieChart.jsp?startDate='+dMonthIntervalDay[0]+'&endDate='+dMonthIntervalDay[1]+'&feeType=1');
}

function getInPkOutPieChart(monthDate){
	var dMonthIntervalDay = getMonthIntervalDay(monthDate);
	$('#pie_container').html('');
	$("#pie_container").dialog({modal:true, autoOpen:false});
	$("#pie_container").dialog('option', 'title', monthDate+' 月收支比');
	$("#pie_container").dialog('option', 'width', 470);
	$("#pie_container").dialog('option', 'height', 300);
	$("#pie_container").dialog('open');
	$('#pie_container').load('/venus/pages/chart/getInPkOutPieChart.jsp?startDate='+dMonthIntervalDay[0]+'&endDate='+dMonthIntervalDay[1]);
}

$(document).ready(function(){
	
	getMonthPie();
	getYearPie();
	getMonthLine();
	//getYearLine();
	getYearCombo();
});

</script>
</head>
<body>
<table width='98%'  border='0' cellpadding='1' cellspacing='1' bgcolor='#CBD8AC' align="center" style="margin-top:8px; text-align: center;">
 <tr>
  <th colspan="2" align="center">
  	<fmt:formatDate value="<%=new Date() %>" pattern="yyyy-MM" type="date"/>月消费记录
  </th>
 </tr>
 <tr>
  <td>
  	<div id="month_pie_container" style="width: 450px; height: 250px; margin: 0 auto"></div>
  </td> 
  <td>
  	<div id="month_line_container" style="width: 1000px; height: 250px; margin: 0 auto"></div>
  </td>
 </tr>
 <tr>
  <th colspan="2" align="center">
  	<fmt:formatDate value="<%=new Date() %>" pattern="yyyy" type="date"/>年消费记录
  </th>
 </tr>
 
 <tr>
  <td>
  	<div id="year_pie_container" style="width: 450px; height: 250px; margin: 0 auto"></div>
  </td> 
  <td>
  <!-- 
  	<div id="year_line_container" style="width: 750px; height: 250px; margin: 0 auto"></div>
   -->
  	<div id="year_combo_container" style="width: 1000px; height: 250px; margin: 0 auto"></div>
  </td>
 </tr>
</table>
	
	
<div id="sub_pie_container" style="width: 450px; height: 250px; margin: 0 auto"></div>
<div id="pie_container" style="width: 450px; height: 250px; margin: 0 auto"></div>
<div id="onemonth_chart_container" style="width: 800px; height: 250px; margin: 0 auto"></div>

</body>
</html>